<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-11 14:32:19
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2024-12-15 16:39:34
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\views\systemManage\userManage\userManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="user">
    <SearchCard @onSearch="onSearch" @onReset="onReset">
      <el-form :model="RoleSearchForm" label-width="auto" :inline="true">
        <el-form-item label="角色名称">
          <pb-input v-model="RoleSearchForm.roleName" placeholder="请输入角色名称" />
        </el-form-item>
      </el-form>
    </SearchCard>
    <pb-card padding="0px " class="flex-1">
      <ContentOperation>
        <pb-button size="small" plain @click="setisVisibleFn(true, 1)">+添加</pb-button>
      </ContentOperation>
      <pb-card>
        <!-- <div><button @click=setisVisibleFn(true)>确认</button></div> -->
        <pb-table :tableData="rolesData.tableData" :column="column">
          <template #operation="{ row }">
            <div class="flex">
              <pb-button text class="mr-6" v-if="row.isDefault != 1"
                @click="setisVisibleFn(true, 2, row)">编辑</pb-button>
              <!-- <pb-button text v-show="!row.isAdmin" @click="DeleteRoleFn(true,row)">删除</pb-button> -->
              <PopconfirmButton v-if="!row.isAdmin" @confirm="DeleteRoleFn(row)"></PopconfirmButton>
            </div>
          </template>
        </pb-table>
        <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
          @onChange="onPagesChange" :total="pages.total"></pb-pagination>
      </pb-card>
    </pb-card>
    <pb-popup v-model="isVisible" :title="dialogtitle" @cancelFn="setisVisibleFn" @confirmFn="setUserData">
      <div class="Modals">
        <div class="flex center1">
          <span>角色名称：</span> <pb-input v-model="roleinfo.rolename" class="pbinput1" />
          <span>角色描述：</span> <pb-input v-model="roleinfo.description" />
        </div>
        <div class="Line"></div>
        <Tree v-if="isVisible" ref="roleTreeRef" :AddOfUpdata="AddOfUpdata" :rolesId="rolesId"></Tree>
      </div>
    </pb-popup>
  </div>
</template>

<script lang="ts" setup>
  import { GetRoleListApi, reqRoleAddApi, reqRoleSaveResourceApi, reqDeleteRoleApi } from '@/api/Newuser'
  import { useUserStore } from "@/store/modules/user";
  // import Tree from './components/tree.vue'
  const userStore = useUserStore()
  const rolesData = reactive({
    tableData: [],
    resourceIdList: []
  })
  const roleinfo = reactive({
    rolename: '',
    description: ''
  })
  const AddOfUpdata = ref('')
  const column = [{

    key: 'roleName',
    name: '角色名称',
    width: 180,
  },
  {
    key: 'description',
    name: '角色描述',
    width: 180,

  },
  {
    key: 'createTime',
    name: '创建时间',
    width: 180,

  },
  {
    slot: 'operation',
    name: '操作',
  }]

  const rolesId = ref('')
  const dialogtitle = ref('')
  const isVisible = ref(false)
  const setisVisibleFn = (Bl: boolean, Tnums: number, el = {} as any) => {
    if (Tnums == 1) {
      roleinfo.description = ''
      roleinfo.rolename = ''
      AddOfUpdata.value = 'add'
      dialogtitle.value = '新增角色'
    } else {
      roleinfo.rolename = el.roleName
      roleinfo.description = el.description
      AddOfUpdata.value = 'updata'
      dialogtitle.value = '编辑角色'
      rolesId.value = el.roleId
    }
    isVisible.value = Bl
  }
  const DeleteRoleFn = ({ roleId }: any) => {
    reqDeleteRoleApi({
      roleId
    }).then(res => {
      getRoleList()
    })
  }
  const setUserData = async () => {
    if (roleinfo.description == '' || roleinfo.rolename == '') {
      return ElMessage.error({ message: '"请不要输入为空"', offset: 66 });
    }
    if (AddOfUpdata.value == 'add') {
      let res = await reqRoleAddApi({
        "roleName": roleinfo.rolename,
        "description": roleinfo.description
      })
      setreqRoleSaveResource(res.data)
      // console.log(res.data)
      // console.log(userStore.pinia_userTreelist)
    } else {
      setreqRoleSaveResource(rolesId.value)
    }
    isVisible.value = false
  }

  const setreqRoleSaveResource = (roleData: any) => {
    reqRoleSaveResourceApi({
      "roleId": roleData,
      "resourceIds": userStore.pinia_userTreelist
    }).then(ress => {
      getRoleList()
    })
  }
  const RoleSearchForm = reactive({
    roleName: '',
  })
  const pages = reactive({
    currentPage: 1,
    pageSize: 15,
    total: 100,
  })
  const onSearch = () => {
    getRoleList()
  }
  const onReset = () => {
    RoleSearchForm.roleName = ''
    pages.currentPage = 1
    // RoleSearchForm.pageSize = 10
    getRoleList()
  }

  const getRoleList = () => {
    let params = {
      "currentPage": pages.currentPage,
      "pageSize": pages.pageSize,
      "sortingFields": [
        {
          "field": "",
          "order": ""
        }
      ],
      "roleName": RoleSearchForm.roleName
    }
    GetRoleListApi(params).then((res) => {
      // console.log(res, '1')
      rolesData.tableData = res.data.records
      pages.total = res.data.total
    })
  }
  const onPagesChange = () => {
    getRoleList()
  }
  onMounted(() => {
    getRoleList()
    // console.log(userStore.pinia_userInfo.roleInfo)
  })
</script>

<style lang="scss" scoped>
  .user {
    .Modals {
      .center1 {
        align-items: center;

        .pbinput1 {
          margin-right: 15px;
        }
      }

      .Line {
        margin-top: 15px;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.10);
      }
    }
  }
</style>